<template>
  <!-- #ifndef XT_PC -->
  <u-upload
    v-if="uploadStyle==='sendImage'"
    ref="upload"
    :file-list="fileList"
    :max-count="disabled?0:(type==='imgs'?maxCount:1)"
    :preview-full-image="true"
    :disabled="disabled"
    image-mode="aspectFill"
    :deletable="!disabled"
    @afterRead="afterRead"
    @delete="deletePic"
  >
    <view class="x-mr-sm x-line-height-1">
      <u-icon
        name="photo"
        size="70rpx"
      />
    </view>
  </u-upload>
  <u-upload
    v-else
    ref="upload"
    :file-list="fileList"
    :max-count="disabled?0:(type==='imgs'?maxCount:1)"
    :preview-full-image="true"
    :disabled="disabled"
    image-mode="aspectFill"
    :deletable="!disabled"
    @afterRead="afterRead"
    @delete="deletePic"
  />
  <!-- #endif -->
  <!-- #ifdef XT_PC -->
  <!-- eslint-disable-next-line vue/no-multiple-template-root -->
  <el-upload
    ref="upload"
    action=""
    :accept="type==='video'?acceptVideo:accept"
    :list-type="listType"
    :show-file-list="showFileList"
    :http-request="doUpload"
    :on-change="doChange"
    :disabled="disabled"
    :before-upload="beforeUpload"
  >
    <template v-if="uploadStyle==='sendImage'">
      <view class="x-flexp-jcai x-mr-sm">
        <i 
          class="el-icon-picture-outline" 
          style="font-size: 200%" 
        />
      </view>
    </template>
    <template v-else-if="type==='avatar'||type==='img'">
      <view
        v-if="img"
        class="x-flexp-column x-flexp-jcai x-ra x-ba"
        @click.stop="disabled&&doPreview()"
      >
        <el-avatar
          v-if="type==='avatar'"
          shape="square"
          :size="80"
          :src="img"
        />
        <el-image
          v-if="type==='img'"
          style="width: 80px; height: 80px"
          :src="img"
          :fit="'contain'" 
        />
        <view
          v-if="!disabled"
          class="x-pa-sm"
        >
          <el-button
            type="text"
            size="mini"
            @click.stop="doPreview()"
          >
            预览
          </el-button>
          <el-button
            type="text"
            size="mini"
            @click.stop="doDelete()"
          >
            删除
          </el-button>
        </view>
      </view>
      <view
        v-else
        class="x-flexp-jcai x-ra x-ba"
        style="width: 80px; height: 80px"
      >
        <i
          v-if="!disabled"
          class="el-icon-plus avatar-uploader-icon"
        />
        <text
          v-else
          class="x-fs-sm x-text-light"
        >
          暂无
        </text>
      </view>
    </template>
    <template v-if="type==='video'">
      <view
        v-if="img"
        class="x-flexp-column x-flexp-jcai x-ra x-ba"
        @click.stop="disabled&&doPreview()"
      >
        <video 
          style="width: 160px; height: 160px"
          :src="img"
          object-fit="contain"
        />
        <view
          v-if="!disabled"
          class="x-pa-sm"
        >
          <!-- <el-button
            type="text"
            size="mini"
            @click.stop="doPreview()"
          >
            预览
          </el-button> -->
          <el-button
            type="text"
            size="mini"
            @click.stop="doDelete()"
          >
            删除
          </el-button>
        </view>
      </view>
      <view
        v-else
        class="x-flexp-jcai x-ra x-ba"
        style="width: 80px; height: 80px"
      >
        <i
          v-if="!disabled"
          class="el-icon-plus avatar-uploader-icon"
        />
        <text
          v-else
          class="x-fs-sm x-text-light"
        >
          暂无
        </text>
      </view>
    </template>
    <template v-if="type==='imgs'">
      <view class="x-flexp-row x-flexp-ai x-flexp-row-stretch x-flex-nowrap">
        <view
          v-for="(v, i) in imgs"
          :key="i"
          class="x-flex-none x-flexp-column x-flexp-jcai x-ra x-ba x-mr x-mb"
          @click.stop="disabled&&doPreview(i)"
        >
          <el-image
            style="width: 80px; height: 80px"
            :src="v"
            :fit="'contain'" 
          />
          <view
            v-if="!disabled"
            class="x-pa-sm"
          >
            <el-button
              type="text"
              size="mini"
              @click.stop="doPreview(i)"
            >
              预览
            </el-button>
            <el-button
              type="text"
              size="mini"
              @click.stop="doDelete(i)"
            >
              删除
            </el-button>
          </view>
        </view>
        <view
          v-if="!disabled"
          class="x-flex-none x-flexp-jcai x-ra x-ba"
          style="width: 80px; height: 80px"
        >
          <i class="el-icon-plus avatar-uploader-icon" />
        </view>
      </view>
    </template>
  </el-upload>
  <!-- #endif -->
</template>

<script>
  export default {
    props: {
      type: {
        type: String,
        default: 'img' // img avatar imgs
      },
      img: {
        type: String,
        default: ''
      },
      imgs: {
        type: Array,
        default: ()=>([])
      },
      maxCount: {
        type: Number,
        default: 5
      },
      maxSize: {
        type: Number,
        default: 1
      },
      files: {
        type: Array,
        default: ()=>([])
      },
      disabled: {
        type: Boolean,
        default: false
      },
      accept:{
        type: String,
        default: 'image/*'
      },
      acceptVideo:{
        type: String,
        default: 'video/*'
      },
      uploadDir:{
        type: String,
        default: ''
      },
      uploadStyle:{
        type: String,
        default: '', // send image
      },
    },
    data() {
      return {
        fileList: this.type==='imgs'?this.imgs.map(v=>({url:v})):(this.img?[{url: this.img}]:[])
      }
    },
    computed: {
      listType() {
        return this.type==='xxx'?'picture-card':'' //picture-card
      },
      showFileList() {
        return false
      }
    },
    watch: {
      // #ifndef XT_PC
      imgs() {
        this.fileList = this.type==='imgs'?this.imgs.map(v=>({url:v})):(this.img?[{url: this.img}]:[])
      },
      img() {
        this.fileList = this.type==='imgs'?this.imgs.map(v=>({url:v})):(this.img?[{url: this.img}]:[])
      }
      // #endif
    },
    methods: {
      beforeUpload(file) {
        const size = file.size / 1024 / 1024 < this.maxSize;
        if (!size) {
          uni.$x.notify.showToast(`上传头像图片大小不能超过 ${this.maxSize}MB!`);
        }
        return size;
      },
      doUpload(options) {
        let uploadData = {
          url: this.$x.request.url.xRequestUpload,
          file: options.file,
        }
        if (this.uploadDir) {
          uploadData =  {
            ...uploadData,
            data: { folderId: 1, parentDir: this.uploadDir }
          }
        }
        
        return this.$x.request.upload(uploadData)
      },
      doDelete(i) {
        this.$emit('delete', i)
        if(this.type==='avatar'||this.type==='img'||this.type==='video') {
          this.$refs.upload.clearFiles()
          this.$emit('change', '')
        }else{
          this.imgs.splice(i, 1)
        }
      },
      doPreview(i) {
        if(this.type==='avatar'||this.type==='img') {
          uni.previewImage({
            urls: this.img?[this.img]:[]
          })
        }else if(this.type==='video') {
          1 // todo
        }else{
          uni.previewImage({
            urls: this.imgs,
            current: i,
          })
        }
      },
      doChange(file, fileList) {
        if(this.type==='avatar'||this.type==='img'||this.type==='video') {
          let ret = fileList.length&&fileList[0].response?fileList[0].response.url:''
          ret && this.$emit('change', ret)
        }else if(this.type==='imgs') {
          if(file.response) {
            this.$emit('add', file.response.url)
            this.imgs.push(file.response.url)
            this.$emit('change', this.imgs)
          }
        }
      },
      deletePic(event) {
        this.fileList.splice(event.index, 1)
        if(this.type==='avatar'||this.type==='img'||this.type==='video') {
          this.$refs.upload.clearFiles()
          this.$emit('change', '')
        }else if(this.type==='imgs') {
          this.$emit('change', this.fileList.map(v=>v.url))
        }
      },
      afterRead(event) {
        if (event.file.size / 1024 / 1024 > this.maxSize) {
          uni.$x.notify.showToast(`上传图片大小不能超过${this.maxSize}MB`)
          return false
        }

        let index = this.fileList.length
        this.fileList.push({
          ...event.file,
          status: 'uploading',
          message: '上传中'
        })

        let uploadData = {
          url: this.$x.request.url.xRequestUpload,
          filePath: event.file.url,
          name: 'file',
        }
        if (this.uploadDir) {
          uploadData =  {
            ...uploadData,
            data: { folderId: 1, parentDir: this.uploadDir }
          }
        }
        this.$x.request.upload(uploadData).then(res=>{
          this.$set(this.fileList, index, {
            ...this.fileList[index],
            status: 'success',
            message: '',
            url: res.url
          })
          if(this.type==='avatar'||this.type==='img') {
            this.$emit('change', this.fileList.length&&this.fileList[0].url||'')
          }else if(this.type==='imgs') {
            this.$emit('change', this.fileList.map(v=>v.url))
          }
        }).catch(error=>{
          this.$set(this.fileList, index, {
            ...this.fileList[index],
            status: 'failed',
            message: '上传错误',
            url: ''
          })
        })
      },
    }
  }
</script>

<style lang="scss" scoped>

</style>
